<template>
  <ul :class="[picLens > 1 ? 'picture-wraps' : 'picture-wrap']">
    <li v-for="(picture, index) in pictures" :key="'p' + index" class="cell">
      <cover-image
        class="cell-image"
        :src="picture.img_src"
        :size="pictureSize"
        @click="preview(index)"
      ></cover-image>
    </li>
  </ul>
</template>

<script>
import { computed, reactive, toRefs } from "vue";
import { ImagePreview } from "vant";
import CoverImage from "@/components/CoverImage";
export default {
  name: "PostPictures",
  components: {
    CoverImage
  },
  props: {
    pictures: {
      type: Array
    },
    pictureSize: {
      type: String,
      default: "@268w_356h_1c"
    }
  },
  setup(props) {
    const params = reactive({
      picUrls: computed(() => {
        return props.pictures.map(picture => picture.img_src)
      }),
      picLens: computed(() => props.pictures.length)
    })
    const preview = (index) => {
      ImagePreview({
        images: params.picUrls,
        startPosition: index,
        closeable: true
      })
    }
    return {
      ...toRefs(params),
      preview
    }
  }
}
</script>

<style lang="scss" scoped>
.picture-wraps,
.picture-wrap {
  padding: {
    left: 10px;
    right: 10px;
  }
  margin-bottom: 10px;
}

.picture-wraps {
  display: flex;
  flex-wrap: wrap;
  .cell {
    flex: 1 0 30%;
    max-width: calc(33.333333% - 6px);
    overflow: hidden;
    margin: 0 3px 6px;
    &-image {
      padding-bottom: 356/356 * 100%;
    }
  }
}

.picture-wrap {
  .cell {
    display: block;
    width: 134px;
    height: 178px;
    &-image {
      padding-bottom: 178/134 * 100%;
    }
  }
}
</style>
